import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { NavBar, Space, } from 'antd-mobile'
import { Cell, Input, hooks, Button, Toast } from 'react-vant'
import { Form } from 'antd-mobile'
import { AntOutline } from 'antd-mobile-icons'

import './forget.css'
import './a.css'
import 'animate.css';

import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:8000/logins'

export default function Forget() {
    const [state, updateState] = hooks.useSetState({
        username: '',
        password: '',
    })
    const [phone, setPhone] = useState('')
    const [str, setStr] = useState(123)
    const [num, setNum] = useState(60)
    let [flag, setFlag] = useState(false)

    const Navigate = useNavigate()
    const getLogin = async () => {
        
        if (phone == str) {
            if (state.password != '') {
                let { data: { code } } = await axios.post('http://127.0.0.1:3000/logins/mima', state)
                if (code == 200) {
                    Toast.loading({
                        message: '加载中...',
                        forbidClick: true,
                    })
                    Toast('更改成功请重新登录~')
                    Navigate('/Login')
                } else if (code == 400) {
                    Toast('该账号不存在~')
                }
            } else if(num == 60){
                Toast('验证码过期，请重新发送~')
            } else {
                Toast('请设置要更改的密码~')
            console.log(str);
            setStr(123)
            }
        }else{
            Toast('验证码错误~')
        }
    }

    const getYzm = async () => {
        if (state.username != '' && state.username.length == 11) {
            let { data: { code, sms } } = await axios.post('http://127.0.0.1:3000/logins/get_sms', state)
            if (code == 0) {
                console.log('sms');
                let countdownTimer = setInterval(() => {
                    setFlag(!flag)
                    setNum((num) => {
                        if (num === 1) {
                            // 倒计时结束，清除定时器并显示按钮
                            clearInterval(countdownTimer);
                            setNum(60)
                            setFlag(flag);
                        }
                        return num - 1;
                    });
                }, 1000);
                Toast.loading({
                    message: '已发送验证码',
                    forbidClick: true,
                })
            }
        } else {
            Toast({
                message: '手机号错误',
                forbidClick: true,
            })
        }
    }

    const back = () => Navigate('/list')

    return (
        <div className="animate__animated animate__backInLeft">
            <img src="../../public/左.png" width="30rem" height="30rem" style={{ position: "absolute", top: "0.5rem" }} onClick={() => { Navigate('/Login') }}></img>
            <p onClick={back} style={{ textAlign: "center", lineHeight: "1.7rem", fontSize: "0.4rem" }}>忘记密码</p>

            <div className='forget_div1'>
                <Form layout='horizontal' >
                    <Form.Item label='手机号' name='username' >
                        <Input placeholder='请输入手机号码' value={state.username}
                            onChange={username => updateState({ username })} clearable />
                    </Form.Item>
                    <Form.Item
                        label='短信验证码'
                        extra={
                            <div>
                                {
                                    flag == false ? <p
                                        style={{
                                            color:'#97b97d'
                                        }}
                                        onClick={() => { getYzm() }}>发送验证码</p> : <p>{num}秒</p>
                                }

                                <p></p>
                            </div>
                        }
                    >
                        <Input placeholder='请输入验证码' value={phone}
                            onChange={phone => setPhone(phone)} clearable type='phone' />
                    </Form.Item>
                    <Form.Item label='新密码' name='password'>
                        <Input placeholder='请输入密码' value={state.password}
                            onChange={password => updateState({ password })} clearable />
                    </Form.Item>

                    <Form.Item >
                        <Button className='forget_button1' type='info' onClick={() => { getLogin() }} align="center">确定</Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}
